<template>
  <van-tabs 
    class="tabs"
    v-model="tabActive" 
    swipe-threshold="4" 
    line-height="2px" 
    :sticky="sticky" 
    :offset-top="offsetTop" 
    :color="color"
    :background="background" 
    :title-active-color="titleActiveColor" 
    :title-inactive-color="titleInactiveColor" 
    :animated="animated" 
    :swipeable="swipeable" 
    @change="onChange" 
    @click="onClick"
  >
    <slot />
  </van-tabs>
</template>

<script>
import variables from '@/styles/variables.scss'

// 横向滚动标签
export default {
  name: "Tabs",
  props: {
    active: { // 选中索引
      type: [String, Number],
      defualt: 0
    },
    color: {
      type: String,
      default: variables.primary
    },
    background: {
      type: String,
      default: '#ffffff'
    },
    titleActiveColor: {
      type: String,
      default: variables.primary
    },
    titleInactiveColor: {
      type: String,
      default: variables.unactive
    },
    animated: { // 切换动画
      type: Boolean,
      defualt: true
    },
    swipeable: { // 滑动切换
      type: Boolean,
      defualt: false
    },
    sticky: { // 是否使用粘性定位布局
      type: Boolean,
      defualt: false
    },
    offsetTop: { // 粘性定位布局下与顶部的最小距离，支持 px vw vh rem 单位，默认 px
      type: [Number, String],
      defualt: 0
    }
  },
  watch: {
    active(val) {
      this.tabActive = val
    }
  },
  data() {
    return {
      tabActive: this.active
    }
  },
  methods: {
    onChange(event) {
      this.$emit('change', event)
    },
    onClick(event) {
      this.$emit('click', event)
    }
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  /deep/ .van-tabs__wrap {
    .van-tabs__nav {
      z-index: 99;
      .van-tab {
        min-width: 80px;
      }
    }
  }
}
</style>
